import styled from 'styled-components';

const Wrapper = styled.section`
  display: flex;
  flex-direction: column;

  > .output {
    background-color: #fff;
    font-size: 36px;
    line-height: 72px;
    box-shadow: inset  0 -5px 5px -5px rgba(0, 0, 0, 0.25),
    inset 0 5px 5px -5px rgba(0, 0, 0, 0.25);
  }

  > .pad {
    > button {
      font-size: 18px;
      float: left;
      width: 25%;
      height: 64px;;
      background-color: #fff;
      border: 1px solid #ddd;

      &.ok {
        float: right;
        height: 128px;
      }

      &.zero {
        width: 50%;
      }

      &:nth-child(4), &:nth-child(8) {
        background-color: ${props => props.theme.light};
        color: ${props => props.theme.main};
      }

      &:nth-child(12) {
        background-color: ${props => props.theme.main};
        color: ${props => props.theme.light};
      }
    }
    
    @media (max-height: 570px){
      >button{
      height: 40px;
        &.ok{
        height: 80px;
        }
      }
     
    }
  }
`;
export default Wrapper;
